<!--
 * @Author: 孙文豪
 * @Description: 进货管理
 * @Date: 2024-03-05 16:15:23
 * @LastEditTime: 2024-03-07 17:47:02
 * @LastEditors: 孙文豪
-->
<template>
  <div class="custom-page" >
    <div class="custom-page-left">
      <div class="custom-title">
        <!-- 日期查询 -->
        <div class="date-query">
          <span>查询日期：</span>
          <el-date-picker
            v-model="dateRange"
            class="kpi-middle-content-date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <!-- 客户查询 -->
        <div class="custom-query">
          <span>客户查询：</span>
          <el-select
            v-model="customQuery"
            filterable
            placeholder="输入客户名称"
            style="width: 180px"
          >
            <el-option
              v-for="item in sourceOptions"
              :key="item.id"
              :label="item.customerName"
              :value="item.id"
            >
              <span style="padding-left: 20px">{{ item.customerName }}</span>
            </el-option>
          </el-select>
        </div>
        <!-- <el-button type="primary" :style="{ marginLeft: '10px' }" @click="queryDataFn"
          >查询</el-button
        > -->
        <el-button :style="{ marginLeft: '10px' }" @click="initQuery">重置</el-button>
        <el-button
          type="primary"
          :style="{ float: 'right' }"
          @click="openAddPurchaseOrder"
          >新增订货单</el-button
        >
      </div>
      <!-- 账单列表 -->
      <div class="custom-list">
        <div class="list-title">
          <p
            class="t-item"
            v-for="item in tableConfig"
            :key="item.dataIndex"
            :style="{ flex: item.share, width: item.width }"
          >
            <span> {{ item.name }}</span>
          </p>
        </div>
        <!-- 清单列表 -->
        <div class="list-main">
          <div
            class="list-item"
            v-for="index in sortDatesDesc(Object.keys(listData))"
            :key="index"
          >
            <div v-if="timeRangeFiltering((index))">
              <p class="date-text" >
                <span v-if="determineExistence(index)"> {{ index }}</span>
                <span :style="{ marginLeft: '20px' }" v-if="!customQuery">
                  {{ totalAmountTheDay(listData[index]) }}</span
                >
              </p>

              <div
                class="sales-item"
                v-for="item in listData[index]"
                :class="{active:detailsObject.id == item.id }"
                :key="item.id"
                @click="detailsObject = item"
              >
              <template  >
                <div
                  v-for="cus in tableConfig"
                  :style="{ flex: cus.share, width: cus.width }"
                  :key="cus.field"
                  class="sales-item-item"
                >
                  <span v-if="cus.field !== 'operate'">
                    {{ item[cus.field] || '-' }}</span
                  >
                  <p class="d-operate" v-else @click.stop>
                    <!-- 删除 -->
                    <span
                      v-for="operate in operateList"
                      :key="operate.code"
                      class="operate-item"
                      :class="operate.code"
                      @click="operateFn(operate.code, index, item)"
                      >{{ operate.name }}</span
                    >
                  </p>
                </div>
              </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>

import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import {tableConfig ,operateList} from './custom.js'
import { setLS, getLS ,formatDateString} from '@/utils/common.js';
export default {
  name: '',
  setup() {
    const data = reactive({
      tableConfig,
      operateList,
      dateRange:[],
      customQuery:'',
      listData:[],
      LSData:[],
      sourceOptions:[],
      commodityData:[]
    });
    onBeforeMount(() => {});
    onMounted(() => {
      init
    });
    // 初始化获取数据
    const init = () => {
      // 各户和供货商数据
      data.LSData = getLS('PURCHASE_AND_CUSTOMER');
      if (data.LSData && data.LSData.source.length > 0) {
        data.sourceOptions = data.LSData.source;
      }
      // 获取商品名单
      data.commodityData = getLS('COMMODITY_DATA') || [];
    };
    const initQuery = ()=>{

    };
    // 按日期排序key值
    const sortDatesDesc = (dateStrings) => {
      return dateStrings.sort((a, b) => {
        const dateA = new Date(a);
        const dateB = new Date(b);
        // 对于降序排序，如果dateA应该排在dateB之后，则返回一个正数，反之则返回负数
        return dateB.getTime() - dateA.getTime();
      });
    };
    const openAddPurchaseOrder = ()=>{

    };
    return {
      openAddPurchaseOrder,
      initQuery,
      sortDatesDesc,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.custom-page {

    .custom-page-left {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 50px;
    box-sizing: border-box;
    .custom-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      padding: 10px 20px;
      min-width: 1000px;
      box-sizing: border-box;
      .date-query,
      .custom-query {
        float: left;
        span {
          font-size: 14px;
          line-height: 30px;
          color: @HSB;
        }
      }
      .custom-query {
        margin-left: 20px;
      }
    }
    .custom-list {
      min-width: 1000px;
      height: 100%;
      width: 100%;
      padding-top: 40px;
      box-sizing: border-box;
      .list-title {
        position: absolute;
        width: 100%;
        min-width: 1000px;
        height: 40px;
        top: 50px;
        left: 0;
        background: @HSF;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        display: flex;
        line-height: 40px;
        box-shadow: 0px 1px 0px #ccc;
      }
      .list-main {
        height: 100%;
        overflow: auto;

        .list-item {
          overflow: hidden;
          cursor: pointer;
          font-size: 14px;
        
          
          .date-text {
            line-height: 30px;
            font-size: 14px;
            padding: 0 20px;
            color: @TSA;
            background: @HSE;
            box-sizing: border-box;
          }
          .sales-item {
            padding: 0 20px;
            display: flex;
            width: 100%;
            line-height: 40px;
            box-sizing: border-box;
            border-bottom: 1px solid @HSE;
           
            &:hover {
              background: @TSD;
            }
            color: @HSB;
            .red {
              color: red;
            }
            .green {
              color: green;
            }
            .sales-item-item {
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 隐藏超出的内容 */
              text-overflow: ellipsis; /* 超出部分显示为省略号 */
            }
            &.active{
              background:@TSC;
            }
          }
          .d-operate {
            display: flex;
            .operate-item {
              flex: 1;
              height: 20px;
              line-height: 20px;
              text-align: center;
              opacity: 0.6;
              margin: 10px 5px;
              color: #fff;
              border-radius: 2px;
              &.delete {
                background: @REA;
              }
              &.edit {
                background: @LS;
              }
              &.details {
                background: @TSA;
              }
              &:hover {
                opacity: 1;
              }
            }
          }
        }
      }
    }

  }

}
</style>
